import React, { useState, useEffect } from 'react';
import { Table, Space, Popconfirm } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import { Student } from '../../../service/student';

interface StudentTableProps {
  loading: boolean;
  studentList: Student[];
  total: number;
  currentPage: number;
  pageSize: number;
  onEdit: (record: Student) => void;
  onDelete: (id: string) => void;
  onPageChange: (page: number, size: number) => void;
  visibleColumns?: string[];
  onColumnsChange?: (columns: any[]) => void;
}

const StudentTable: React.FC<StudentTableProps> = ({
  loading,
  studentList,
  total,
  currentPage,
  pageSize,
  onEdit,
  onDelete,
  onPageChange,
  visibleColumns,
  onColumnsChange
}) => {
  // 定义默认列配置
  const defaultColumns: ColumnsType<Student> = [
    {
      title: '排序',
      dataIndex: 'index',
      render: (_, __, index) => index + 1 + (currentPage - 1) * pageSize,
      width: 80,
    },
    {
      title: '姓名',
      dataIndex: 'username',
    },
    {
      title: '性别',
      dataIndex: 'sex',
    },
    {
      title: '年龄',
      dataIndex: 'age',
    },
    {
      title: '班级',
      dataIndex: 'className',
    },
    {
      title: '身份证',
      dataIndex: 'idCard',
      render: (text) => text || '-',
    },
    {
      title: '邮箱',
      dataIndex: 'email',
      render: (text) => text || '-',
    },
    {
      title: '创建时间',
      dataIndex: 'createdAt',
      render: (text) => {
        if (!text) return '-';
        const date = new Date(text);
        return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
      },
      search: false,
      editable: false
     },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Space size="middle">
          <a onClick={() => onEdit(record)}>编辑</a>
          <Popconfirm
            title="确定要删除这条记录吗?"
            onConfirm={() => onDelete(record._id)}
            okText="确定"
            cancelText="取消"
          >
            <a>删除</a>
          </Popconfirm>
        </Space>
      ),
    },
  ];

  // 状态管理当前显示的列
  const [activeColumns, setActiveColumns] = useState<ColumnsType<Student>>(defaultColumns);
  // 根据visibleColumns过滤显示的列
  useEffect(() => {
    if (visibleColumns && visibleColumns.length > 0) {
      const filteredColumns = defaultColumns.filter(col => 
        !('children' in col) && (
          visibleColumns.includes(col.dataIndex as string) || 
          visibleColumns.includes(col.key as string)
        )
      );
      setActiveColumns(filteredColumns);
    } else {
      setActiveColumns(defaultColumns);
    }
  }, [visibleColumns]);

  // 提供列配置给父组件
  useEffect(() => {
    if (onColumnsChange) {
      onColumnsChange(defaultColumns);
    }
  }, []);

  return (
    <Table
      columns={activeColumns}
      dataSource={studentList}
      rowKey="_id"
      loading={loading}
      pagination={{
        current: currentPage,
        pageSize: pageSize,
        total: total,
        onChange: onPageChange,
        showSizeChanger: true,
        showQuickJumper: true,
        showTotal: (total) => `第 ${(currentPage - 1) * pageSize + 1}-${Math.min(currentPage * pageSize, total)} 条/总共 ${total} 条`,
      }}
    />
  );
};

export default StudentTable;